<template>
	<view class="index">
		<!-- 顶部导航栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<navBar title="博客首页" :home="true"></navBar>
		<!-- #endif -->

		<!-- 搜索框 -->
		<u-search placeholder="请输入内容" v-model.trim="keyword" margin="10px" shape="square" :showAction="false" @search="search"></u-search>
		<!-- 点赞弹出层：无效果 -->
		<!-- <u-notify message="点赞成功" :show="show"></u-notify> -->
		<!-- 选项卡 -->
		<u-tabs :current="current" :list="classifyList" @change="tabsCurrentChange" keyName="classifyName"></u-tabs>

		<!-- 分割线 -->
		<u-divider></u-divider>

		<!-- 轮播图 -->
		<swiper :current="current" @change="swiperCurrentChange" :style="'height:' + (height + 60) + 'px'">
			<swiper-item v-for="(item, index) in classifyList" :key="index">
				<view class="swiper-item">
					<!-- 如何处理每个瀑布流的数据？怎样保证数据的独立？ -->
					<u-waterfall v-model="blogRenderList[index]" ref="waterfall" class="waterfall">
						<template v-slot:left="{ leftList }">
							<view class="blog-item" v-for="(item, index) in leftList" :key="index" @click="jumpToDetails(item.blogId)">
								<image @load="imageLoaded" :src="item.Blog.cover" mode="widthFix"></image>
								<view class="blog-title">{{ item.Blog.title }}</view>
								<view class="blog-author">{{ item.Blog.userName }}</view>
								<view class="interaction" v-if="token">
									<u-icon name="heart-fill" class="star" :color="loveBlogs.some(ele => ele == item.blogId) ? 'red' : '#606266'" size="20px"></u-icon>

									<!-- <u-icon name="plus" class="plus"></u-icon> -->
								</view>
							</view>
						</template>
						<template v-slot:right="{ rightList }">
							<view class="blog-item" v-for="(item, index) in rightList" :key="index" @click="jumpToDetails(item.blogId)">
								<image @load="imageLoaded" :src="item.Blog.cover" mode="widthFix"></image>
								<view class="blog-title">{{ item.Blog.title }}</view>
								<view class="blog-author">{{ item.Blog.userName }}</view>
								<view class="interaction" v-if="token">
									<u-icon name="heart-fill" class="star" :color="loveBlogs.some(ele => ele == item.blogId) ? 'red' : '#606266'" size="20px"></u-icon>
									<!-- <u-icon name="plus" class="plus"></u-icon> -->
								</view>
							</view>
						</template>
					</u-waterfall>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { getClassify, getBlogByClassify, getLoveBlog } from '@/config/api.js';

export default {
	data() {
		return {
			token: '',
			keyword: '',
			//	当前选项卡所处的下标
			current: 0,
			//	选项卡分类列表
			classifyList: [],
			//	文章渲染列表
			blogRenderList: [],
			//	轮播图的高度
			height: 0,
			// 点赞的博客的id
			loveBlogs: [],
			tempId: 0
			// isShow: true
			// getDetailsId:0,
		};
	},
	onLoad() {
		this.initClassify();
		this.initToken();
	},
	onShow() {
		// 一进入页面调用所有点赞过的博客
		if (this.token) {
			this.trumbs();
		}
	},
	onPullDownRefresh() {
		this.current = 0;
		//	将页面的数据进行更新，更新前，先将原始数据清空
		//	通过 refs 获取所有的 waterfall，再遍历去执行每个 waterfall 里的 clear 函数，清空瀑布流里的数据
		this.$refs.waterfall.forEach(vc => vc.clear());
		this.blogRenderList = [];
		this.initClassify();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 2000);
	},
	methods: {
		jumpToDetails(blog) {
			// console.log(blog);
			uni.navigateTo({
				url: '/subpages/details/details?blogid=' + blog
			});
		},
		async trumbs() {
			const userLoveBlogs = await getLoveBlog(this.token);
			// 拿到点赞博客的id
			this.loveBlogs = userLoveBlogs.data.rows.map(ele => ele.blogId);
		},
		initToken() {
			this.token = uni.getStorageSync('userInfo').token;
			// console.log(this.token);
		},
		tabsCurrentChange(e) {
			this.current = e.index;
		},
		swiperCurrentChange(e) {
			this.current = e.detail.current;

			//	重新获取当前分类下的瀑布流高度
			this.imageLoaded();

			//	判断当前分类下是否存在数据？如果存在，就无需再请求了
			if (this.blogRenderList[this.current]) return;

			//	用于请求当前分类所对应的博客数据
			//		需要当前分类的 ID
			const currentClassifyId = this.classifyList[this.current].id;
			this.initBlogByClassify(currentClassifyId);
		},
		//	初始化分类数据
		async initClassify() {
			const classify = await getClassify();
			// console.log(classify);
			this.classifyList = classify.data.rows;

			//	由于是第一次加载数据，需要默认将分类的第一项博客数据进行加载
			this.initBlogByClassify(this.classifyList[0].id);
		},
		async initBlogByClassify(id) {
			const blogs = await getBlogByClassify(id);

			//	在 Vue2 响应式中，不是任何操作都能引起视图发生改变（更新）
			//		通过数组的下标去修改数组的成员
			//	解决方案：原生 Vue 可以使用 Vue.set 去触发视图更新，uniApp 中可以使用 this.$set 触发更新

			this.$set(this.blogRenderList, this.current, blogs.data.rows);
			// console.log(this.blogRenderList);
		},
		//  当图片加载完毕，实时获取当前瀑布流的最新高度
		imageLoaded() {
			uni.createSelectorQuery()
				.selectAll('.waterfall')
				.boundingClientRect(res => {
					this.height = res[this.current].height;
				})
				.exec();
		},
		async search() {
			if (!this.keyword)
				return uni.showToast({
					icon: 'error',
					title: '搜索不能为空'
				});

			//	当搜索值不为空时，通过 navigateTo 将关键词携带到搜索页进行搜索
			uni.navigateTo({
				url: '/subpages/search/search?keyword=' + this.keyword,
				success: () => {
					//	跳转成功的话，就清空关键词
					this.keyword = null;
				}
			});
		}
		// async changeStateL(blog) {
		// 	this.tempId = blog.blogId;
		// 	// 点赞行为
		// 	const isLoveSuccess = await isLoveBlog(blog.blogId, this.token);
		// 	console.log(isLoveSuccess);
		// 	// 获取点赞信息，并判断点击项是否被点赞
		// 	this.trumbs();
		// 	// 如果下面这个变量为1,则是点赞过的；为0是未点赞
		// 	// console.log(blog.likeBlog.count);
		// 	this.isShow = false;
		// 	// 强制刷新子组件
		// 	// setTimeout(() => {
		// 	// 	this.isShow = true;
		// 	// }, 10000);
		// 	this.$nextTick(() => {
		// 		this.isShow = true;
		// 	});
		// }
	},
	// watch: {
	// 	loveBlogs: {
	// 		deep: true,
	// 		handler() {
	// 			console.log(this.loveBlogs);
	// 			if (this.loveBlogs.findIndex(ele => ele === this.tempId) !== -1) {
	// 				console.log(this.tempId + '已点赞');
	// 			} else {
	// 				console.log(this.tempId + '未点赞');
	// 			}
	// 		}
	// 	}
	// },
	computed: {
		// isLoveBlog() {
		// 	return function(item) {
		// 		// 取出该博客id
		// 		// console.log(item.blogId);
		// 		console.log(this.loveBlogs.findIndex(ele => item.blogId));
		// 		// return 'red';
		// 		return this.loveBlogs.findIndex(ele => item.blogId) != -1 ? 'red' : '#606266';
		// 	};
		// }
	}
};
</script>

<style lang="scss">
.isRedActive {
	color: red;
}
* {
	font-family: 'catstyle';
}
swiper {
	min-height: 60vh;

	.waterfall {
		padding: 0 10px;

		.blog-item {
			width: 95%;
			margin: 0 auto;
			margin-bottom: 12px;
			padding: 10px;
			border: 0.5px solid #c8c7cc;
			border-radius: 8px;
			box-sizing: border-box;
			box-shadow: rgba(242, 174, 39, 0.3) 0 3px 8px;
			background-color: #fff;

			.blog-author {
				margin-top: 5px;
				font-size: 14px;
			}

			image {
				width: 100%;
				border-radius: 8px;
			}
			> .interaction {
				position: relative;
				left: 73%;
				transform: translate(5vw, -17vw);
				> .star {
					position: absolute;
				}
			}
		}
	}
}
</style>
